<template>
  <div class="u-p-r-100">
    <el-row class="is-back-padding" style="padding-top: 10px">
      <el-form :model="formData" size="mini" label-width="150px">
        <el-col :span="6">
          <el-form-item label="区域">
            <el-input v-model="formData.quyu" :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
          <el-form-item label="收货日历">
            <el-input v-model="formData.shouhuorili" :style="{ width: '100%' }">
            </el-input>
          </el-form-item>

          <el-form-item label="客户等级">
            <el-select
              v-model="formData.kehudengji"
              placeholder="请选择客户等级"
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in listOptions.kehudengjiOptions"
                :key="index"
                :label="item.Name"
                :value="item.ID"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="特殊要求">
            <el-input
              v-model="formData.teshuyaoqiu"
              :style="{ width: '100%' }"
              type="textarea"
              maxlength="200"
              show-word-limit
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="保证金">
            <el-input
              v-model="formData.baozhengjing"
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="作业时间">
            <el-input
              v-model="formData.zuoyeshijian"
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>

          <el-form-item label="自定义1">
            <el-input v-model="formData.zhidingyi1" :style="{ width: '100%' }">
            </el-input>
          </el-form-item>

          <el-form-item label="其他备注">
            <el-input
              v-model="formData.qitabeizhu"
              :style="{ width: '100%' }"
              type="textarea"
              maxlength="200"
              show-word-limit
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="邮编">
            <el-input v-model="formData.youbian" :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
          <el-form-item label="行业">
            <el-input v-model="formData.hangye" :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
          <el-form-item label="自定义2">
            <el-input v-model="formData.zhidingyi2" :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="结账方式">
            <el-select
              v-model="formData.jiezhangfanshi"
              placeholder="请选择结账方式"
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in listOptions.jiesuanfangshiOptions"
                :key="index"
                :label="item.Name"
                :value="item.ID"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="付款期限(天)">
            <el-input
              v-model="formData.fukuanqixian"
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>

          <el-form-item label="特殊要求附件">
            <PreviewUploadBtn v-model="formData.teshuyaoqiufujian" />
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import PreviewUploadBtn from "@/components/Universal/PreviewUploadBtn/index.vue";
import ValidateMixin from "@/mixins/ValidateMixin.js";
/**
 * 表单校验
 */
let REQUIRED_PORP_LIST1 = [
  {
    label: "其他-区域",
    prop: "quyu",
  },
  {
    label: "其他-行业",
    prop: "hangye",
  },
];
export default {
  name: "tab3",
  mixins: [ValidateMixin],
  components: {
    PreviewUploadBtn,
  },
  data() {
    return {
      formData: {
        quyu: "",
        youbian: "",
        shouhuorili: "",
        zuoyeshijian: "",
        hangye: "",
        zhidingyi1: "",
        kehudengji: "",
        qitabeizhu: "",
        baozhengjing: "",
        jiezhangfanshi: "",
        teshuyaoqiu: "",
        teshuyaoqiufujian: [],
        fukuanqixian: "",
        zhidingyi2: "",
      },

      listOptions: {
        kehudengjiOptions: [
          {
            ID: "123",
            Nmae: "地方",
          },
        ],
        kehudengjiOptions: [
          {
            ID: "123",
            Nmae: "地方",
          },
        ],
        jiesuanfangshiOptions: [
          {
            ID: "123",
            Nmae: "地方",
          },
        ],
      },
    };
  },
  methods: {
    //校验必填
    verify_required() {
      return this.$validateForm(this.formData, REQUIRED_PORP_LIST1);
    },
  },
  created() {},
};
</script>

<style lang="scss" scoped></style>
